<template>
  <el-dialog ref="diaRef" v-model="visible">
    <el-form :model="myProps.row" label-width="120">
      <el-form-item label="楼盘名字">
        <el-input v-model="myProps.row.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值">
        <el-input-number :max="1000000" :min="1" v-model="myProps.row.sort"></el-input-number>
      </el-form-item>
      <el-form-item label="区域">
        <el-select v-model="myProps.row.regionId">
          <el-option v-for="(p, index) in myProps.regionList" :key="index" :label="p.name" :value="p.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElDialog, ElMessage } from "element-plus";
import { ref } from "vue";

interface Props {
  row: any;
  api?: (params: any) => Promise<any>;
  getTable?: () => Promise<any>;
  regionList: any;
}

const initData: any = {
  name: "",
  sort: 1,
  regionId: 0,
  regionList: []
};

const myProps = ref<Props>({ row: JSON.parse(JSON.stringify(initData)), regionList: [] });

const visible = ref(false);

const diaRef = ref<InstanceType<typeof ElDialog> | null>();

const acceptParams = (params: any) => {
  myProps.value = params;
  visible.value = true;
};

const submit = async () => {
  try {
    await myProps.value.api!(myProps.value.row);
    ElMessage.success("成功");
    await myProps.value.getTable!();
    visible.value = false;
  } catch (error) {}
};

defineExpose({ acceptParams });
</script>

<style></style>
